import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table, Card, Col, Row, DatePicker, Modal, message } from 'antd'
import moment from 'moment';
/* 引用接口文档路径 */
import {
  selectActive,addActive,deleteActive,activeJion
} from 'actions/industry'
import '../../style/userControl.less'

import ModalAddIndustryActivities from './addIndustryActivitiesModal.js';
const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//数据列表
      addModalFlg:false,//新增要闻弹窗
      contentModal:false,
      modalList:"",
      addModalType:"",
      startTime:"",//活动时间
      activeListModal:false,//活动列表弹窗状态
      activeList:"",//活动列表数据
    }
    this.currentNumber=1//当前页面
    this.keyword={"title":"","startTime":""};//搜索关键词
    this.pagesize = 10;
    this.currentActiveNumber = 1;//报名列表页码
    this.activityId = "";//活动ID
  }
  componentDidMount() {//页面首次加载
    this.selectList();
  }
  searchFN(){//点击搜索按钮
    this.keyword = {"title":this.props.form.getFieldValue('title'),"startTime":this.state.startTime};
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(selectActive(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }

  submitTimeFn(value){//选择活动时间
    this.state.startTime = value ? value._d.format("yyyy-MM-dd hh:mm:ss") : '' 
  }


  addReport(type,data){//新增视频
    //编辑的情况  带数据去组件
    this.setState({
      addModalFlg: true,
      modalList:data,
      addModalType:type,
    })
  }
  addModalCancel(){
    this.setState({
      addModalFlg: false,
    });
  }

  showModal(data){//点击查看 
      this.setState({
        contentModal: true,
        modalList:data
      }) 
  }
  contentModalCancel(){//关闭查看弹窗
    this.setState({
      contentModal: false,
    },()=>{
      this.setState({
        modalList: "",
      })
    })
  }

  deleteList(id){
    Modal.confirm({
      content:"确定要删除该条信息么？",
      onOk:()=>{
        this.props.dispatch(deleteActive(
          {"activityId":id},
          (respose) => {
            var length = this.state.list.respData.count ? this.state.list.respData.count : 0;
            if(Math.ceil(length/this.pagesize) == this.currentNumber && length%this.pagesize == 1 && this.currentNumber != 1){
              this.currentNumber = this.currentNumber - 1;
            }
            message.success(respose.respMsg)
            this.contentModalCancel();
            this.selectList(this.currentNumber);
        }))
      },
      onCancel:()=>{

      }
    })
  }

  selectActiveList(pageNumber){//查询列表
    const data = {"start":pageNumber||1,"end":this.pagesize,"activityId":this.activityId}
    this.currentActiveNumber = pageNumber||1;
    this.props.dispatch(activeJion(
      data,
      (respose) => {
        this.setState({
          activeList: respose,
        })
    }))
  }

  activeList(id){//查看活动列表
    this.activityId = id;
    this.selectActiveList(1)
    this.setState({
      activeListModal:true,
    })
  }

  activeListCancel(){
    this.currentActiveNumber = 1;
    this.setState({
      activeListModal:false,
    })
  }

  columns() {//表格标题
    return [
      {
        title: '活动编号',
        key: 'code',
        dataIndex: 'code',
        width: '10%',
      },
      {
        title: '活动标题',
        dataIndex: 'title',
        key: 'title',
        width: '20%',
        
      },
      {
        title: '活动banner',
        dataIndex: 'banner',
        key: 'banner',
        width: '10%',
        render: (text, recordId, index) => <img style={{width:'50px'}} src={text ? text : require('../../images/baseHeader.png')} />,     
        
      },
      {
        title: '活动时间',
        dataIndex: 'startTime',
        key: 'startTime',
        width: '10%',
      },
      {
        title: '活动地址',
        dataIndex: 'address',
        key: 'address',
        width: '15%',
      },
      {
        title: '活动状态',
        dataIndex: 'activityStatus',
        key: 'activityStatus',
        width: '15%',
        render: (text, recordId, index) => <span>{text == 1? '筹备中' :(text == 2?'进行中' : '已结束')}</span>,
      },
      {
        title: '操作',
        width: '15%',
        render: (text, recordId, index) => 
        <div>
          <Button type="primary" size="small" onClick={this.activeList.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>报名列表</Button>          
          <Button type="primary" size="small" onClick={this.addReport.bind(this,2,text)} style={{marginRight:"5px",marginBottom:"5px"}}>编辑</Button>          
          <Button type="primary" size="small" onClick={this.showModal.bind(this,text)} style={{marginRight:"5px",marginBottom:"5px"}}>查看</Button>
          <Button type="primary" size="small" onClick={this.deleteList.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>删除</Button>
        </div>,
      }
    ]
  }

  activeColumns() {//报名列表-表格
    return [
      {
        title: '序号',
        width: '10%',
        dataIndex: 'accountId',
        key: 'accountId',
        render: (text, recordId, index) => 
        <span>{index+1}</span>,     
      },
      {
        title: '姓名',
        dataIndex: 'userName',
        key: 'userName',
        width: '20%',
        
      },
      {
        title: '手机号',
        key: 'mobile',
        dataIndex: 'mobile',        
        width: '20%',
      },
      {
        title: '报名时间',
        dataIndex: 'signUpTime',
        key: 'signUpTime',
        width: '20%',        
      },
     
    ]
  }

  


  render () {
    const { getFieldDecorator } = this.props.form    
    const accountList = this.state.list.respData || [];//刷新页面调用接口数据赋值
    const activeList = this.state.activeList.respData || [];//刷新页面调用接口数据赋值
    const modalList = this.state.modalList ? this.state.modalList :[];
    const dateFormat = 'YYYY/MM/DD';
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form layout="inline">
            <FormItem label="活动标题">      
              {
                getFieldDecorator('title', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }             
            </FormItem>
            <FormItem label="活动时间">
              <DatePicker onChange={this.submitTimeFn.bind(this)} format={dateFormat} />             
            </FormItem>
            <Button  type="primary" onClick={this.searchFN.bind(this)}>搜索</Button>
            <Button  type="primary" onClick={this.addReport.bind(this,1,{})}>新增</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            columns={this.columns()}//表格标题列
            dataSource={accountList.resultData}
            pagination={{ total: accountList.count, current:this.currentNumber, pageSize: this.pagesize , onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}
          />
        </Spin>
        {/* 新增活动弹窗 */}
        {
          this.state.addModalFlg ?
          <ModalAddIndustryActivities 
            type={this.state.addModalType}
            ModalFlg={this.state.addModalFlg} 
            ModalCancel={this.addModalCancel.bind(this)} 
            callback={this.selectList.bind(this)}
            content={this.state.modalList.id ? this.state.modalList : {}}
          /> : ""
        }
        {/* 信息展示弹窗 */}
        {
          this.state.contentModal ?
          <Modal
            width={"80%"}
            visible={this.state.contentModal}
            title="课堂详情"
            onCancel={this.contentModalCancel.bind(this)}
            footer={[
              <Button key="submit" type="primary"  onClick={this.deleteList.bind(this,modalList.id)}>删除</Button>,
            ]}
          >
            <ul className="joinBlackListModal">
              <li>
                <span className="title">活动标题:</span><span className="content">{modalList.title}</span>
              </li>
              <li>
                <span className="title">活动封面:</span><span className="content"><img style={{width:"100px"}} src={modalList.banner?modalList.banner:require('../../images/baseImg.png')}/></span>
              </li>
              <li>
                <span className="title">活动说明:</span><span className="content">{modalList.explain}</span>
              </li>
              <li>
                <span className="title">活动介绍:</span><span className="content" dangerouslySetInnerHTML={{__html: modalList.introduce}}></span>
              </li>
              <li>
                <span className="title">活动地址:</span><span className="content">{modalList.address}</span>
              </li>
              <li>
                <span className="title">活动时间:</span><span className="content">{modalList.startTime + ' - ' + modalList.endTime}</span>
              </li>
            </ul>
          </Modal>:''
        }
        
        {/* 报名列表 */}
        {
          this.state.activeListModal ?
            <Modal
              width={"80%"}
              visible={this.state.activeListModal}
              title="报名列表"
              onCancel={this.activeListCancel.bind(this)}
              footer={''}
            >
              <Table
                rowKey="accountId"
                columns={this.activeColumns()}//表格标题列
                dataSource={activeList.resultData}
                pagination={{showTotal:total => `共 ${total} 条数据`, total: activeList.count, current:this.currentActiveNumber, pageSize: this.pagesize , onChange: this.selectActiveList.bind(this)}}
                scroll={{ y: true }}
              />
          </Modal>:''
        }
        
      </div>
    )
  }
}